import { Component } from 'react';
import './App.css';
import Logo, {LogoButton} from './Logo';
import TBooks from './tBooks/TBooks';
import TClasses from './tClasses/TClasses';
import TToolbox from './tToolbox/TToolbox';
import packages from '../package.json';
import 'katex/dist/katex.min.css';

export const Homepage = packages.homepage;


class App extends Component{
  constructor(props){
    super(props);

    this.state={
      pageName : 'home',
    }

    this.handlePageChange = this.handlePageChange.bind(this);
    this.homepage         = this.homepage.bind(this);
  }

  // 显示主页
  homepage(){
    document.title =  `T+藏宝馆`;
    this.setState({ pageName:'t-home' });
  }
  // 页面切换
  handlePageChange(event){
    this.setState({ pageName:event.target.id });
  }

  _home(){
    return(
      <header className="App-header">
        <Logo />
        <div>
          <LogoButton name='课堂' id="t-classes" onClick={this.handlePageChange}/>
          <LogoButton name='书局' id="t-book"    onClick={this.handlePageChange}/>
          <LogoButton name='宝库' id="t-toolbox" onClick={this.handlePageChange}/>
        </div>
      </header>
    );
  }

  render(){
    return (
      <div className="App">
        {(
          ()=>{
            switch(this.state.pageName){
              case 't-home'   : return this._home();
              case 't-classes': return <TClasses home={this.homepage}/>;
              case 't-book'   : return <TBooks   home={this.homepage}/>;
              case 't-toolbox': return <TToolbox home={this.homepage}/>;
              default:return this._home();
            }
          }
        )()}
      </div>
    );
  }
}

export default App;
